<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会员登陆-集利财富</title>
    <link rel="stylesheet" type="text/css" href="../css/animate.css">
    <link rel="stylesheet" type="text/css" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <script src='../script/jquery.js'></script>
</head>
<body>
  <header class="aui-bar aui-bar-nav headerbg">
      <div class="aui-pull-left aui-btn" tapmode onclick='api.closeWin()'>
          <span class="aui-iconfont aui-icon-left"></span>返回
      </div>
      <div class="aui-title">用户登陆</div>
      <!-- <div class="aui-pull-right aui-btn" tapmode onclick='jumpToRegister()'>
          注册
      </div> -->
  </header>
  <div class='login-content'>
    <img src="../image/common/logo.png" alt="">
    <form action="" id="loginForm">
      <ul>
        <li class='inputItem'>
            <input type="text" class='username' name='username' id='username' placeholder="请输入你的用户名或手机号码">
            <i><img src="../image/common/phone.png" alt=""></i>
        </li>
        <li class='inputItem'>
            <input type="text" class='userpwd' name='userpwd' id='userpwd' placeholder="请输入你的密码">
            <i><img src="../image/common/pwd.png" alt=""></i>
        </li>
      </ul>
    </form>
    <div class='inputBtn'>
      <div class="loginBtn aui-btn aui-btn-block">登陆</div>
    </div>
    <div class="login-other">
      <ul lass='aui-clearfix'>
        <li tapmode onclick="jumpToRegister()"><span>没有账号？马上注册！</span></li>
        <li><span>忘记密码？找回密码！</span></li>
      </ul>
    </div>
  </div>
  <div id="errorBox"></div>
  <script src='../script/common.js'></script>
  <script src='../script/jquery.validate.min.js'></script>
  <script>
  //**
  //** 设置跳转方法
  //**
  function jumpToRegister (){
    api.openWin({
        name: 'register',
        url: './register.html',
        pageParam: {
            name: 'test'
        },
        animation:'movein'
    });
  }

  //**
  //** 设置表单验证发放
  //**
  $('#loginForm').validate({
      debug: true, //调试模式取消submit的默认提交功能
      errorClass: "showerror",
      focusInvalid:false,
      focusCleanup:true,
      onblur:false,
      onfocusout:false,
      onkeyup:false,
      rules:{
          username:{
              required:true,
              isphone:true,
              minlength:11,
              maxlength:11
          },
          userpwd:{
              required:true,
              ispsw:true
          }
      },
      messages:{
          username:{
              required:"请输入手机号哦~",
              isphone:'请输入正确格式手机号哦~',
              maxlength:'手机长度为11位哦~'
          },
          userpwd:{
              required:"请输入验证码哦~",
              ispsw:'请输入6-30位字符',
          }
      },
      errorElement:'div',
      errorLabelContainer: $("#errorBox")
  });
  //自定义验证方法
  $.validator.addMethod('isphone',function(value,element){
      var REG = /^1[3|4|5|8][0-9]\d{4,8}$/;
      return this.optional(element) || (REG.test(value));
  });
  $.validator.addMethod('ispsw',function(value,element){
      var REG = /^\w{6,30}$/;
      return this.optional(element) || (REG.test(value));
  });

  //**
  //** 定义登陆按钮事件
  //**
  $('.loginBtn').click(function(){
    if(!$("#username").valid()||
        !$("#userpwd").valid()){
      $('#errorBox .showerror').showErrorMsg();
    }else{
      //验证通过，发送请求
      showWaitingProgress();
      apiPost({
        url:'https://www.51jili.com/Api/login',
        values:{
          'account':$("#username").val(),
          'password':$("#userpwd").val()
        },
        fun:function (ret,err){
          if (ret) {
              api.hideProgress();
              // 登陆成功则关闭登陆窗口
              var dialog = api.require('dialogBox');
              dialog.alert({
                  texts: {
                      title: '是否关闭登陆页面确认',
                      content: '你确定要关闭？',
                      leftBtnTitle: '取消',
                      rightBtnTitle: '确认'
                  },
                  styles:{
                    bg:'#fff',
                    w:300,
                    title:{
                      marginT: 20,
                      titleSize: 14,
                      titleColor: '#000'
                    },
                    content: {
                        color: '#000',
                        size: 14
                    },
                    left: {
                        marginB: 7,
                        marginL: 20,
                        w: 130,
                        h: 35,
                        corner: 2,
                        bg: '#fff',
                        color:'#000',
                        size: 12
                    },
                    right: {
                        marginB: 7,
                        marginL: 10,
                        w: 130,
                        h: 35,
                        corner: 2,
                        bg: '#ef4646',
                        color:'#fff',
                        size: 12
                    }
                  }
                },
                function(ret){
                  var dialogBox = api.require('dialogBox');
                  if (ret.eventType == 'left') {
                      dialogBox.close({
                          dialogName: 'alert'
                      });
                  }else if(ret.eventType == 'right'){
                    dialogBox.close({
                        dialogName: 'alert'
                    });
                    api.closeWin();
                  }
                }
              )
          } else {
              showNetErrorProgress();
              // api.alert({ msg: JSON.stringify(err) });
          }
        }
      })
    }
  })
  </script>
</body>
</html>
